import React, { useEffect, useRef, useState } from 'react';
import { Table, Modal, Form, Input, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import SearchTree from '../../tree/search';
import pho from '../image/图标.png';

const systemDimension: React.FC<TableListItem> = (props) => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  interface DataType {
    key: string;
    type: string;
    code: string;
    name: string;
  }
  const initData: DataNode[] = [
    {
      staffCode: 'M域',
      accountCode: 'caijf15',
      staffType: 1,
      sex: 1,
      staffName: '合作方门户',
      staffState: 0,
      email: 'xuanmei1@chinaunicom.cn',
      mobile: '中国联通软件研究院',
      staffBusinessType: 50,
      hrStaffType: 1143,
      quitDate: null,
    },
  ];

  /**
   * 定义行信息
   */
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (text, rocord, index) => index + 1,
    },
    {
      title: '角色类型',
      dataIndex: 'type',
    },
    {
      title: '角色编码',
      dataIndex: 'code',
    },
    {
      title: '角色名称',
      dataIndex: 'name',
    },
    {
      title: '操作',
      dataIndex: 'option',
      render: (text, row, _, action) => (
        <a onClick={showModal}>看关联用户岗位</a>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: '1',
      type: '超管',
      code: 'admin',
      name: '超级管理员',
    },
    {
      key: '2',
      type: '管理类',
      code: 'user',
      name: '供应商管理员',
    },
    {
      key: '3',
      type: '管理类',
      code: 'user-info',
      name: '代理商管理员',
    },
  ];

  const modalColumns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (text, rocord, index) => index + 1,
    },
    {
      title: '用户姓名',
      dataIndex: 'type',
    },
    {
      title: '用户账号',
      dataIndex: 'code',
    },
    {
      title: '组织',
      dataIndex: 'name',
    },
    {
      title: '操作',
      dataIndex: 'option',
      render: (text, row, _, action) => <a onClick={showModal}>查看</a>,
    },
  ];

  const modalData: DataType[] = [
    {
      key: '1',
      type: '超管',
      code: 'admin',
      name: '超级管理员',
    },
    {
      key: '2',
      type: '管理类',
      code: 'user',
      name: '供应商管理员',
    },
    {
      key: '3',
      type: '管理类',
      code: 'user-info',
      name: '代理商管理员',
    },
  ];

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div style={{ display: 'flex', height: 'calc(100vh - 48px)' }}>
      <div className="contentLeft">
        <SearchTree />
      </div>
      <div className="divider"></div>
      <div className="contentRight">
        <div>
          <div className="basInfTil">系统信息</div>
          <div className="basInfCon">
            <div className="circle">
              <img src={pho} />
            </div>
            <div className="basCon">
              <div>
                <span style={{ marginBottom: '6px' }}>
                  {initData[0].staffName}
                </span>
              </div>
              <div>
                <span style={{ marginRight: '16px' }}>
                  归属系统领域：{initData[0].staffCode}
                </span>
                <span style={{ marginRight: '16px' }}>
                  归属组织：{initData[0].mobile}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div className="basInfTil">角色信息</div>
        <Table
          columns={columns}
          dataSource={data}
          bordered
          pagination={{
            total: 30,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
        />
      </div>
      <Modal
        title="查询用户"
        open={isModalOpen}
        width={1000}
        onOk={handleOk}
        onCancel={handleCancel}
        okText={<div>确定</div>}
        cancelText={<div>取消</div>}
        className="searchWrapper"
      >
        <Form
          form={form}
          name="control-hooks"
          onFinish={onFinish}
          colon={false}
          style={{ display: 'flex', flexWrap: 'nowrap' }}
        >
          <Form.Item name="用户姓名" label="用户姓名" className="formItem">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item name="用户账号" label="用户账号" className="formItem">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item className="formItem">
            <Button type="primary" htmlType="submit" className="searchBtn">
              搜索
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
        <Table
          columns={modalColumns}
          dataSource={modalData}
          bordered
          pagination={{
            total: 30,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
        />
      </Modal>
    </div>
  );
};

export default systemDimension;
